<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 默认@input  ===》 @change -->
    <input type="text" v-model.lazy="username" /> {{ username }}
    <!-- 输入框的值自动转换成 number 类型 -->
    <input type="text" v-model.number= "age"> {{ age }}
    <!-- 去除两端空格 -->
    <input type="text" v-model.trim="note"> {{ note }}
    <button @click="getNote">获取note</button>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '吴大勋',
      age: '10',
      note: ''
    },
    methods: {
      getNote () {
        console.log(this.note)
      }
    }
  })
</script>
</html>